<template>
  <div class="header">
    <img src="../image/banners.png" alt="">
    <div class="search">
      <div class="title flex flex-pack-center">
        <span class="title-em">星查查 &千万主播直联报品</span>
        <span class="title-fu">主播选品</span>
        <span class="title-fu">数据分析</span>
        <span class="title-fu">直联主播</span>
      </div>
      <div class="page-tab flex flex-pack-center">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="changeIndex(index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="input">
        <input
          v-model="keyword"
          maxlength="30"
          :placeholder="placeholder"
          @keyup.enter="searchList"
        >
        <div class="btn" @click="searchList">
          <i class="iconfont icon-bianzu5" />
        </div>
      </div>
      <div class="word">
        <p>
          大数据助力人货匹配，商家直联报名主播，主播一键对接品牌，直播电商数字化服务平台。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavHeader',
  data() {
    return {
      allWidth: '100%',
      activeTab: 0,
      tabList: [
        {
          name: '主播报名',
          route: 'hjAnchorList',
          placeholder: '搜索主播名称'
        },
        {
          name: '供应链商品',
          route: 'hjSupplyList',
          placeholder: '搜索商品名称'
        },
        {
          name: '商品选品',
          route: 'hjGoodsList',
          placeholder: '搜索商品名称'
        },
        {
          name: '直播机构',
          route: 'hjOrganList',
          placeholder: '搜索机构名称/主播名称'
        },
        // {
        //   id: 3,
        //   name: '主播场次',
        //   route: 'hjMerchantsList',
        //   placeholder: '搜索主播名称'
        // },
        {
          name: '主播数据',
          route: 'hjAnchorDataList',
          placeholder: '请输入主播名称'
        },
        {
          name: '商品数据',
          route: 'hjGoodsDataList',
          placeholder: '请输入商品名称'
        }
        // ,{
        //   id: 6,
        //   name: '基地',
        //   route: 'hjLiveBaseList',
        //   placeholder: '搜索基地名称/店铺名称'
        // }
        // { id: 7, name: '品牌', route: '' }
      ],
      keyword: '',
      placeholder: '搜索主播名称'
    }
  },
  created() {
    this.getWidth()
  },
  methods: {
    getWidth() {
      this.allWidth = document.body.clientWidth
    },
    searchList() {
      this.$router.push({
        name: this.tabList[this.activeTab].route,
        query: {
          keyword: this.keyword
        }
      })
    },
    changeIndex(index) {
      this.activeTab = index
      this.placeholder = this.tabList[index].placeholder
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  video {
    width: 100%;
    height: 100%;
    z-index: -10;

    object-fit: fill;
  }
  img {
    width: 100%;
    height: 100%;
    z-index: -10;
    object-fit: cover;
  }
  .search {
    position: absolute;
    top: 203px;
    width: 100%;
    z-index: 100;
    color: #fff;
    .title {
      font-weight: 500;
    }
    .title-em {
      font-size: 44px;
      font-family: PingFangSC-Medium, PingFangSC;
    }
    .title-fu {
      font-size: 22px;
      margin-left: 32px;
      padding-top: 14px;
      font-family: PingFangSC-Medium, PingFangSC;
      &:nth-of-type(1) {
        margin-left: 23px;
      }
    }
    .page-tab {
      margin-top: 40px;
    }
    .tab-item {
      padding: 4px 8px 5px;
      margin-left: 10px;
      cursor: pointer;
      &:nth-of-type(1) {
        margin-left: 0;
      }
    }
    .active {
      background: #ff0929;
      border-radius: 100px;
    }
    .input {
      width: 874px;
      height: 46px;
      position: relative;
      margin: 16px auto 0;
      overflow: hidden;
      border-radius: 100px;
      input {
        width: 874px;
        height: 46px;
        border: none;
        font-size: 16px;
        padding: 0 30px;
        line-height: 20px;
        background: #fff;
        caret-color: #666666;
        border-radius: 100px;
        outline: none;
      }
      .btn {
        width: 94px;
        height: 46px;
        text-align: center;
        background: none;
        color: #333;
        line-height: 46px;
        cursor: pointer;
        border-radius: 0 100px 100px 0;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
      }
      i {
        font-size: 26px;
      }
    }
    .word {
      width: 720px;
      margin: 42px auto 0;
      font-size: 18px;
    }
  }
}
</style>
